<div class="flex min-h-full">
    <AzimuttWeb.Components.Step.step steps={get_steps("About you")} />
    <div class="flex flex-col items-center justify-center px-4 py-12 mx-auto mt-0 sm:px-6 lg:px-8">
        <div>
            <%= render AzimuttWeb.LayoutView, "_flash.html", conn: @conn %>
            <%= render "_background_grid.html" %>
            <h2 class="text-2xl font-bold tracking-tight text-gray-900 md:text-3xl xl:text-4xl">Tell us a bit more about you...</h2>
            <p class="mt-6 mb-4 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-lg">
            </p>
            <.form let={f} for={@changeset} action={Routes.user_onboarding_path(@conn, :about_you_next)}>
                <div class="grid grid-cols-4 gap-6 mt-6 sm:max-w-md lg:max-w-lg">
                    <div class="col-span-4 sm:col-span-2">
                        <%= label f, :location, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= select f, :location, Azimutt.Utils.Country.all, required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :location %>
                    </div>
                    <div class="col-span-4 sm:col-span-2">
                        <%= label f, :phone, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= text_input f, :phone, type: "tel", placeholder: "+33 6 74 94 18 37", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :phone %>
                    </div>
                    <div class="col-span-4">
                        <%= label f, :description, "Your bio", class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= textarea f, :description, placeholder: "Senior Software Engineer at Azimutt, working on the next awesome feature!", rows: 4, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :description %>
                    </div>
                </div>
                <div class="px-4 py-6 text-center sm:px-6">
                    <%= submit "Continue", class: "inline-block rounded-md bg-gray-900 px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600" %>
                </div>
            </.form>
        </div>
    </div>
</div>
